<template>
  <el-card class="question-preview">
    <div class="title">{{ subject.subjectTitle }}</div>
    <el-radio-group
      class="option"
      v-model="subject.answer"
      v-show="subject.subjectType != 2 && subject.subjectType != 6"
    >
      <el-radio v-for="item in subject.options" :key="item.optionTitle" :label="item.optionTitle">
        {{ item.optionTitle }} {{ item.optionContent }}
      </el-radio>
    </el-radio-group>
    <el-checkbox-group
      class="option"
      v-model="subject.correctArray"
      v-show="subject.subjectType == 2"
    >
      <el-checkbox
        v-for="item in subject.options"
        :label="item.optionTitle"
        :key="item.optionTitle"
      >
        {{ item.optionTitle }} {{ item.optionContent }}
      </el-checkbox>
    </el-checkbox-group>
    <template v-if="showResult">
      <div v-if="subject.subjectType != 6" class="">标准答案: {{ subject.answer }}</div>
      <div v-if="subject.subjectType == 6" class="">填空答案: {{ subject.textAnswer }}</div>
      <div class="analysis">题干解析:</div>
      <div class="analysis">{{ subject.titleAnalysis }}</div>
      <div class="analysis">答案解析:</div>
      <div class="analysis">{{ subject.answerAnalysis }}</div>
    </template>
  </el-card>
</template>

<script>
export default {
  name: 'SubjectShow',
  props: {
    subject: {
      type: Object
    },
    showResult: {
      type: Boolean
    }
  },
  data() {
    return {
      correctArray: []
    };
  },
  watch: {
    subject: {
      handler(newValue) {},
      immediate: true
    }
  }
};
</script>

<style type="scss" scoped>
.title {
  margin: 5px 0px;
  font-size: 14px;
  font-weight: bold;
}
::v-deep .el-radio {
  margin: 5px 5px;
}
.analysis {
  margin: 5px 0px;
}
</style>
